<template>
  <div class="detail-page">
    <div class="detail-card">
      <el-page-header @back="router.back()" content="亚让详情" class="card-header" />
      <div class="table-wrap" v-loading="loading">
        <div v-if="html" v-html="html"></div>
        <div v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getDetailTable } from '../api/companies'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const html = ref<string>('')

// 更稳健的 Unicode 解码（支持 \uXXXX 形式）
const decodeUnicode = (input: any) => {
  if (input == null) return ''
  const str = String(input)
  return str.replace(/\\u([0-9a-fA-F]{4})/g, (_: string, g: string) => String.fromCharCode(parseInt(g, 16)))
}

const load = async () => {
  const mid = route.params.mid as string
  if (!mid) {
    ElMessage.error('缺少 mid 参数')
    return
  }
  loading.value = true
  try {
    const resp = await getDetailTable(mid)
    const raw: any = resp?.data
    let content = ''

    if (typeof raw === 'string') {
      try {
        const obj = JSON.parse(raw)
        content = obj?.table_content ?? obj?.data?.table_content ?? obj?.data ?? ''
      } catch {
        const m = raw.match(/"table_content"\s*:\s*"([\s\S]*?)"/)
        if (m) {
          try { content = JSON.parse(`"${m[1]}"`) } catch { content = m[1] }
        } else {
          content = raw
        }
      }
    } else if (raw && typeof raw === 'object') {
      content = raw.table_content ?? raw.data?.table_content ?? raw.data ?? ''
    }

    html.value = content ? decodeUnicode(String(content)).trim() : ''
  } catch (e: any) {
    console.error('详情加载失败:', e?.response || e)
    ElMessage.error(e?.response?.data?.message || e?.message || '详情加载失败')
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>

<style scoped>
.detail-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.detail-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

:deep(.card-header) {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.card-header .el-page-header__content) {
  font-size: 20px;
  font-weight: 600;
  color: #2980b9;
}

:deep(.card-header .el-page-header__left) .el-icon {
  color: #2980b9;
}

.table-wrap {
  padding: 20px;
  overflow: auto;
  margin-top: 0;
  min-height: 200px; /* 设置一个最小高度，确保空状态时也有合适高度 */
}

/* 优化传入的HTML样式 */
.table-wrap :deep(table) {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.table-wrap :deep(th) {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
  padding: 12px 8px;
  text-align: center;
  font-weight: 700;
  color: #333;
  border-bottom: 2px solid #e4e7ed;
}

.table-wrap :deep(td) {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid #e4e7ed;
  line-height: 1.5;
  word-break: break-word;
}


.table-wrap :deep(tr:last-child td) {
  border-bottom: none;
}

/* 为特定类名的td添加背景色 */
.table-wrap :deep(td.hg_blue) {
  background-color: #409eff !important;
  color: white;
  font-weight: 600;
}

.table-wrap :deep(td.hg_red) {
  background-color: #f56c6c !important;
  color: white;
  font-weight: 600;
}

.table-wrap :deep(td.hg_green) {
  background-color: #67c23a !important;
  color: white;
  font-weight: 600;
}

.table-wrap :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

/* 优化传入的其他HTML元素样式 */
.table-wrap :deep(h1),
.table-wrap :deep(h2),
.table-wrap :deep(h3),
.table-wrap :deep(h4),
.table-wrap :deep(h5),
.table-wrap :deep(h6) {
  margin: 16px 0 12px 0;
  color: #2c3e50;
  font-weight: 600;
}

.table-wrap :deep(h1) {
  font-size: 24px;
  border-bottom: 2px solid #2980b9;
  padding-bottom: 10px;
}

.table-wrap :deep(h2) {
  font-size: 20px;
}

.table-wrap :deep(h3) {
  font-size: 18px;
}

.table-wrap :deep(p) {
  line-height: 1.6;
  margin: 10px 0;
  color: #333;
}

.table-wrap :deep(strong) {
  font-weight: 600;
}

.table-wrap :deep(.text-red) {
  color: #f56c6c;
  font-weight: 600;
}

.table-wrap :deep(.text-green) {
  color: #67c23a;
  font-weight: 600;
}

.table-wrap :deep(.text-blue) {
  color: #409eff;
  font-weight: 600;
}

.table-wrap :deep(a) {
  color: #2980b9;
  text-decoration: none;
}

.table-wrap :deep(div) {
  line-height: 1.5;
}

/* 暂无数据提示 */
.table-wrap > div:last-child:not([v-html]) {
  text-align: center;
  padding: 10px;
  padding-top: 0px;
  color: #909399;
  font-size: 16px;
}

/* 滚动条样式 */
.table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-wrap::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 3px;
}

.table-wrap::-webkit-scrollbar-track {
  background-color: #f1f3f5;
}


/* 响应式设计 */
@media (max-width: 768px) {
  .detail-page {
    padding: 10px;
  }

  .detail-card {
    border-radius: 8px;
  }

  :deep(.card-header) {
    padding: 15px;
  }

  .table-wrap {
    padding: 15px;
    max-height: calc(100vh - 120px);
  }

  .table-wrap :deep(table) {
    font-size: 12px;
  }

  .table-wrap :deep(th),
  .table-wrap :deep(td) {
    padding: 8px 4px;
  }

  .table-wrap :deep(h1) {
    font-size: 20px;
  }

  .table-wrap :deep(h2) {
    font-size: 18px;
  }

  .table-wrap :deep(h3) {
    font-size: 16px;
  }
}
</style>